<template>
	<view>
		<tab index="0" :animation="true" tabPadding="40" @changeIndex="changeIndex">
			<tab-pane label="标签一">
				<view style="height: 100px;">内容1</view>
				<view style="height: 100px;">内容1</view>
				<view style="height: 100px;">内容1</view>
				<view style="height: 100px;">内容1</view>
				<view style="height: 100px;">内容1</view>
				<view style="height: 100px;">内容1</view>
				<view style="height: 100px;">内容1</view>
				<view style="height: 100px;">内容1</view>
				<view style="height: 100px;">内容1</view>
				<view style="height: 100px;">内容1</view>
			</tab-pane>
			<tab-pane label="标签二">内容2</tab-pane>
			<tab-pane label="标签三3">内容3</tab-pane>
			<tab-pane label="标签四44">内容4</tab-pane>
			<tab-pane label="标签五555">内容5</tab-pane>
			<tab-pane label="标签六6666">内容6</tab-pane>
			<tab-pane label="标签七77777">内容7</tab-pane>
		</tab>
	</view>
</template>
<script>
	import tab from '@/components/lipan-tabs/lipan-tabs.vue';
	import tabPane from '@/components/lipan-tabs/lipan-tab-pane.vue';
	export default {
		components: {
			tab,
			tabPane
		},
		// #ifdef VUE2
		methods: {
			changeIndex(index) {
				console.log('改变了index:', index)
			}
		},
		// #endif
		// #ifdef VUE3
		setup() {
			function changeIndex(index) {
				console.log('改变了index:', index)
			}
			return {
				changeIndex
			}
		}
		// #endif
	}
</script>
<style scoped lang="scss">
</style>
